<template>
  <div>
    <Header/>
    <div class="header">
      <div class="header-header">
        <div class="header-navbar" style="height: auto;">
          <div class="bigimg" href target="_blank" style="height: 600px;">
            <img :src="news.img" style="margin: 0px 0px 0px -0.5px;width: 100%;height: 100%;"/>
          </div>
        </div>
        <div class="show-info">
          <div class="show-name">
            <a href="#" target="_blank">
              <h2>{{news.name}}</h2>
            </a>
          </div>
          <p class="location">{{news.overview}}</p>
        </div>
      </div>
      <div class="place-search-panel">
        <form action method="post">
          <div>
            <input type="text" placeholder="我想去" class="search-input" autocomplete="off"/>
            <a href="#" class="search-button">
              <i class="icon-search"></i>
            </a>
          </div>
        </form>
      </div>
    </div>
    <div style="margin-top: 59px;width: 97%;">
      <div class="headerTag">
        热门景点
      </div>
      <div class="hotSceneCityContent">
        <div class="cityChoice">
          地点选取
        </div>
        <div class="cityList">
          <div class="cityListIndex" :class="{'cityListIndexActive': citySceneChoice === list}"
               @mouseover="cityChoiceMouseOver($event, list)"
               v-for="(list, index) in city" :key="index">
            {{list}}
          </div>
        </div>
        <div @click="moreScene" class="more">
          查看更多
        </div>
      </div>
      <div v-for="(val,index) in sceneEachData" :key="index" class="sceneListIndex">
        <Img class="imgEach" :imgSrc="val.smallImg" :contentTitle="val.name" :contentContent="val.recommend"
             :id="val.sceneId"
             :isSave="val.isSave"
             @saveClick="sceneSaveClick"
             :border="true"/>
      </div>
      <div class="clearFix"/>
    </div>
    <div style="margin-top: 59px;width: 97%;">
      <div class="headerTag">
        酒店推荐
      </div>
      <div class="hotSceneCityContent">
        <div class="cityChoice">
          地点选取
        </div>
        <div class="hotelCityList">
          <div class="hotelCityListIndex" :class="{'hotelCityListIndexActive': cityHotelChoice === list}"
               @mouseover="hotelCityChoiceMouseOver($event, list)"
               v-for="(list, index) in city" :key="index">
            {{list}}
          </div>
        </div>
        <div @click="moreHotel" class="more">
          查看更多
        </div>
      </div>
      <div v-for="(val,index) in hotelEachData" :key="index" class="sceneListIndex">
        <Img class="imgEach" :imgSrc="val.img" :contentTitle="val.name" :contentContent="val.address"
             :id="val.hotelId"
             :isSave="val.isSave"
             @saveClick="hotelSaveClick"
             :title="val.star + '分'"
             :titlePosition="'upLeft'"
             :border="true"/>
      </div>
      <div class="clearFix"/>
    </div>
    <bottom/>
  </div>
</template>

<script>
  import Header from '@/components/common/header.vue'
  import Bottom from '@/components/common/bottom.vue'
  import Img from '@/components/common/img.vue'

  export default {
    name: 'index',
    inject: ['reload'],
    created() {
      this.$axios({
        url: this.api.homeIndex,
        params: {
          hotCity: 5,
          loopIndex: 1
        },
        method: 'get'
      }).then(res => {
        if (res.state === 0) {
          let hotCityList = res.data.hotCityList
          this.news = res.data.indexLoopInfoList[0]
          this.city = hotCityList
        }
      })
    },
    watch: {
      city(val) {
        if (val !== null) {
          for (let i = 0; i < val.length; i++) {
            this.sceneIndex[val[i]] = 1
            this.hotelIndex[val[i]] = 1
            this.$axios({
              url: this.api.searchScene,
              params: {
                "city": val[i],
                'index': 1,
                'size': 4
              },
              method: 'get'
            }).then(res => {
              if (res.state === 0) {
                this.citySceneList[val[i]] = res.data.records
                this.sceneTotalIndex[val[i]] = Math.floor(res.data.total / res.data.size) + (res.data.total % res.data.size === 0 ? 0 : 1)
                if (val[i] === val[0]) {
                  this.citySceneChoice = val[0]
                }
              }
            })
            this.$axios({
              url: this.api.searchHotel,
              params: {
                'index': 0,
                'size': 4,
                'city': val[i],
              },
              method: 'get'
            }).then(res => {
              if (res.state === 0) {
                this.cityHotelList[val[i]] = res.data.records
                this.hotelTotalIndex[val[i]] = Math.floor(res.data.total / res.data.size) + (res.data.total % res.data.size === 0 ? 0 : 1)
                if (val[i] === val[0]) {
                  this.cityHotelChoice = val[0]
                }
              }
            })
          }
        }
      },
      citySceneChoice(val, oldVal) {
        if (!val) {
          return
        }
        if (val === oldVal) {
          return
        }
        this.sceneEachData = this.citySceneList[val]
      },
      cityHotelChoice(val, oldVal) {
        if (!val) {
          return
        }
        if (val === oldVal) {
          return
        }
        this.hotelEachData = this.cityHotelList[val]
      }
    },
    data() {
      return {
        news: {},
        city: [],
        citySceneList: {},
        cityHotelList: {},
        citySceneChoice: '',
        cityHotelChoice: '',
        sceneEachData: {},
        hotelEachData: {},
        sceneTotalIndex: {},
        hotelTotalIndex: {},
        sceneIndex: {},
        hotelIndex: {},
      }
    },
    methods: {
      cityChoiceMouseOver(e, value) {
        let citySceneChoice = this.citySceneChoice
        if (citySceneChoice === value) {
          return
        }
        this.citySceneChoice = value
        if (!this.citySceneList.hasOwnProperty(value)) {
          this.sceneIndex[value] = 1
          this.$axios({
            url: this.api.searchScene,
            params: {
              'city': value,
              'index': 1,
              'size': 4
            },
            method: 'get'
          }).then(res => {
            if (res.state === 0) {
              this.sceneTotalIndex[value] = Math.floor(res.data.total / res.data.size) + (res.data.total % res.data.size === 0 ? 0 : 1)
              this.citySceneList[value] = res.data.records
            }
          })
        }
      },
      hotelCityChoiceMouseOver(e, value) {
        let cityHotelChoice = this.cityHotelChoice
        if (cityHotelChoice === value) {
          return
        }
        this.cityHotelChoice = value
        if (!this.cityHotelList.hasOwnProperty(value)) {
          this.hotelIndex[value] = 1
          this.$axios({
            url: this.api.searchHotel,
            params: {
              'index': 1,
              'size': 4,
              'city': value,
            },
            method: 'get'
          }).then(res => {
            if (res.state === 0) {
              this.hotelTotalIndex[value] = Math.floor(res.data.total / res.data.size) + (res.data.total % res.data.size === 0 ? 0 : 1)
              this.cityHotelList[value] = res.data.records
            }
          })
        }
      },
      sceneSaveClick(id, isSave) {
        let post = {}
        post['sceneId'] = id
        if (isSave) {
          post['type'] = 2
        } else {
          post['type'] = 1
        }
        this.$axios({
          url: this.api.saveScene,
          params: post,
          method: 'post'
        }).then(res => {
          if (res.state !== 0) {
            for (let i of this.sceneEachData) {
              if (i.sceneId === id) {
                i.isSave = !isSave
                break
              }
            }
            for (let j of this.citySceneList[this.citySceneChoice]) {
              if (j.sceneId === id) {
                j.isSave = !isSave
                break
              }
            }
            alert(res.msg)
          } else {
            for (let i of this.sceneEachData) {
              if (i.sceneId === id) {
                i.isSave = !isSave
                break
              }
            }
            for (let j of this.citySceneList[this.citySceneChoice]) {
              if (j.sceneId === id) {
                j.isSave = !isSave
                break
              }
            }
          }
        })
      },
      hotelSaveClick(id, isSave) {
        let post = {}
        post['hotelId'] = id
        if (isSave) {
          post['type'] = 2
        } else {
          post['type'] = 1
        }
        this.$axios({
          url: this.api.saveHotel,
          params: post,
          method: 'post'
        }).then(res => {
          if (res.state !== 0) {
            for (let i of this.hotelEachData) {
              if (i.hotelId === id) {
                i.isSave = !isSave
                break
              }
            }
            for (let j of this.cityHotelList[this.cityHotelChoice]) {
              if (j.hotelId === id) {
                j.isSave = !isSave
                break
              }
            }
            alert(res.msg)
          } else {
            for (let i of this.hotelEachData) {
              if (i.hotelId === id) {
                i.isSave = !isSave
                break
              }
            }
            for (let j of this.cityHotelList[this.cityHotelChoice]) {
              if (j.hotelId === id) {
                j.isSave = !isSave
                break
              }
            }
          }
        })
      },
      moreScene() {
        let city = this.citySceneChoice
        let index = this.sceneIndex[city]
        let totalIndex = this.sceneTotalIndex[city]
        if (1 === totalIndex) {
          alert("已经没有数据了")
          return
        }
        this.sceneIndex[city] = ++index
        this.$axios({
          url: this.api.searchScene,
          params: {
            'city': city,
            'index': index % totalIndex + 1,
            'size': 4
          },
          method: 'get'
        }).then(res => {
          if (res.state === 0) {
            this.citySceneList[city] = res.data.records
            this.sceneEachData = res.data.records
          }
        })
      },
      moreHotel() {
        let city = this.cityHotelChoice
        let index = this.hotelIndex[city]
        let totalIndex = this.hotelTotalIndex[city]
        if (1 === totalIndex) {
          alert("已经没有数据了")
          return
        }
        this.hotelIndex[city] = ++index
        this.$axios({
          url: this.api.searchHotel,
          params: {
            'city': city,
            'index': index % totalIndex + 1,
            'size': 4
          },
          method: 'get'
        }).then(res => {
          if (res.state === 0) {
            this.cityHotelList[city] = res.data.records
            this.hotelEachData = res.data.records
          }
        })
      }
    },
    components: {
      Header,
      Bottom,
      Img
    }
  }
</script>

<style scoped>
  a {
    text-decoration: none;
    color: #000000;
  }

  img {
    border: 0;
    vertical-align: middle;
  }

  div {
    display: block;
  }

  form {
    display: block;
    margin-top: 0em;
  }

  h2 {
    display: block;
    font-size: 1.5em;
    margin-block-start: 0.83em;
    margin-block-end: 0.83em;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
    font-weight: bold;
  }

  .header {
    margin-top: -4px;
    position: relative;
    width: 97%;
  }

  .header-header {
    overflow: hidden;
    width: 100%;
    position: relative;
  }

  .header li {
    list-style: none;
    float: left;
    padding: 0px 10px 0 25px;
    font-size: 14px;
    font-family: Arial, 'Lucida Grande', 'Microsoft Yahei', 'Hiragino Sans GB',
    'Hiragino Sans GB W3', SimSun, 'PingFang SC', STHeiti;
  }

  .header-navbar {
    background: #ccc;
    width: 100%;
  }

  .bigimg {
    display: block;
    position: relative;
    overflow: hidden;
  }

  a.bigimg .shade {
    position: absolute;
    bottom: 0px;
    top: 0px;
    right: 0px;
    left: 0px;
    z-index: 1;
  }

  .persion-content a:hover {
    color: #999;
  }

  .header-header:hover .header-nav a {
    color: #333;
  }

  .header-header:hover {
    background: white;
    border-radius: 0px 0px 6px 6px;
  }

  .place-search-panel {
    position: absolute;
    z-index: 2;
    left: 50%;
    top: 350px;
    margin: -71px 0 0 -500px;
    width: 360px;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
  }

  .icon-search {
    display: inline-block;
    margin-top: 11px;
    width: 24px;
    height: 24px;
    background: url(../assets/images/header-sprites.png) no-repeat 0 -110px;
    overflow: hidden;
    vertical-align: top;
  }

  .search-button {
    height: 46px;
    width: 45px;
    line-height: 1;
    float: left;
    background-color: #ff9d00;
    border-radius: 4px;
    text-align: center;
  }

  .search-input {
    float: left;
    width: 268px;
    height: 46px;
    margin: 0 6px 0 0;
    padding: 0 20px;
    background-color: #fff;
    border: 0 none;
    line-height: 46px;
    font-size: 18px;
    color: #111;
    border-radius: 4px;
  }

  .show-info {
    position: absolute;
    right: 4%;
    top: 50%;
    z-index: 1;
    width: 535px;
    height: 170px;
    margin-right: auto;
    margin-top: -120px;
    padding-right: 30px;
    border-right: 7px solid #fff;
    text-shadow: 0 2px 3px rgba(0, 0, 0, 0.5);
    color: #fff;
    font-size: 16px;
    line-height: 1.8;
    white-space: normal;
    text-align: left;
  }

  .show-info h2 {
    font-weight: normal;
    line-height: inherit;
    font-size: 30px;
  }

  .show-name {
    position: static;
    margin: 10px 0;
    font-size: 40px;
    line-height: 1.3;
    text-align: left;
  }

  .show-name a {
    color: #fff;
    text-decoration: none;
  }

  .show-name a:hover {
    color: #ff9d00;
  }

  .location {
    position: static;
    font-size: 16px;
    top: 120px;
    right: 140px;
    padding: 0;
    word-wrap: break-word;
  }

  .headerTag {
    font-size: 26px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(0, 0, 0, 1);
  }

  .hotSceneCityContent {
    margin-top: 18px;
    display: inline-block;
    width: 100%;
    height: 30px;
  }

  .cityChoice {
    float: left;
    margin-left: 141px;
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(83, 83, 83, 1);
  }

  .cityList {
    float: left;
    line-height: 29px;
    display: inline-block;
    position: relative;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(83, 83, 83, 1);
  }

  .hotelCityList {
    margin-left: 221px;
    float: left;
    line-height: 29px;
    display: inline-block;
    position: relative;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(83, 83, 83, 1);
  }

  .cityListIndex {
    cursor: pointer;
    margin: 0 10px;
    display: inline-block;
  }

  .hotelCityListIndex {
    display: inline-block;
    cursor: pointer;
    margin: 0 10px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(83, 83, 83, 1);
  }

  .sceneListIndex {
    float: left;
    margin: 10px 10px;
  }

  .imgEach {
    display: inline-block;
  }

  .sceneList {
    float: left;
    display: inline-block;
  }

  .cityListIndexActive {
    color: #ff9d00;
    border-bottom: 3px solid #ff9d00;
  }

  .hotelCityListIndexActive {
    background: rgba(255, 143, 11, 1);
    border-radius: 4px;
    color: #ffffff;
  }

  .more {
    font-size: 20px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: rgba(83, 83, 83, 1);
    cursor: pointer;
  }

</style>
